<template>
  <div>
    <h3>{{}}的歌曲列表</h3>
  </div>
</template>

<script>
export default {
  name: "MusicDetail",
  // props: ["id", "age"],
  beforeCreate() {
    console.log("musicdetail", "beforeCreate");
  },
  mounted() {
    /*
      我们想要获取动态路由params传值,需要使用$route
      $route.params是一个对象,包含params传递过来的数据
    */
    console.log("**********musicdetail");
  },
  updated() {
    console.log("************updated");
  },
  computed: {
    name() {
      const { id } = this.$route.params;
      switch (id) {
        case "1":
          return "周杰伦";
        case "2":
          return "林俊杰";
        case "3":
          return "陈奕迅";
        default:
          return "XXXX";
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    console.log(to, from, next);
    console.log("路由内进入时守卫");
    console.log(this); //undefined
    next(() => {
      console.log(this);
    });
  },
  beforeRouteUpdate(to, from, next) {
    console.log(to, from, next, "beforeRouteUpdate");
    console.log("组件内更新时");
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log(to, from, next, "beforeRouteLeave");
    console.log("组件离开时");
    next();
  },

  //监视动态路由参数的更新
  watch: {
    $route(newVal) {
      console.log("动态路由更新参数", newVal);
    },
  },
};
</script>

<style></style>
